<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>后台管理主页</title>
	<link rel="stylesheet" type="text/css" href="../lib/themes/easyui.css">
	<link rel="stylesheet" type="text/css" href="../lib/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="../lib/css/demo.css">
	<script type="text/javascript" src="../lib/js/jquery.min.js"></script>
	<script type="text/javascript" src="../lib/js/jquery.easyui.min.js"></script>
</head>
<body>

	<div class="easyui-layout" data-options="fit:true">
		<div data-options="region:'north'" style="height:50px">
			<h2>广电总局后台管理系统</h2>
		</div>
		<div data-options="region:'south',split:true" style="height:50px;"></div>
		<div data-options="region:'west',split:true" title="West" style="width:200px;">

			<div class="easyui-accordion" data-options="fit:true">
				<div title="About" data-options="iconCls:'icon-ok'" style="overflow:auto;padding:10px;">
					<ul class="easyui-tree wu-side-tree">
						<li iconCls="icon-man">
							<a href="javascript:void(0)" data-icon="icon-chart-organisation" data-link="total/user.html" iframe="1">
								用户管理
							</a>
						</li>
						<li iconCls="icon-large-chart"><a href="javascript:void(0)" data-icon="icon-users" data-link="total/classify.html" iframe="1">分类管理</a></li>
						<li iconCls="icon-large-shapes"><a href="javascript:void(0)" data-icon="icon-user-group" data-link="total/news.html" iframe="1">新闻管理</a></li>
			  
					</ul>
	
				</div>
				<div title="Help" data-options="iconCls:'icon-help'" style="padding:10px;">
					<p>The accordion allows you to provide multiple panels and display one or more at a time. Each panel has built-in support for expanding and collapsing. Clicking on a panel header to expand or collapse that panel body. The panel content can be loaded via ajax by specifying a 'href' property. Users can define a panel to be selected. If it is not specified, then the first panel is taken by default.</p> 		
				</div>
			</div>

		</div>
		<div data-options="region:'center',title:'Main Title',iconCls:'icon-ok'">
			<div id="wu-tabs" class="easyui-tabs" data-options="border:false,fit:true">  
				<div title="首页" data-options="closable:false,iconCls:'icon-tip',cls:'pd3'">
					<h2>欢迎来到广电总局后台管理系统</h2>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript">

	$(function(){
		$('.wu-side-tree a').bind("click",function () {
			var title=$(this).text();
			var url=$(this).attr('data-link');
			var iconCls=$(this).attr('data-icon');
			var iframe=$(this).attr('iframe')==1?true:false;
			addTab(title,url,iconCls,iframe);
		})
	});
		function addTab(title,href,iconCls,iframe){
		var tabPanel=$('#wu-tabs');
		//如果存在的话就创建
		if(!tabPanel.tabs('exists',title)){
			var content='<iframe scrolling="auto" frameborder="0" src="'+href+'"style="width:100%;height:100%;"></iframe>';//放置内容是iframe请求来de
			//是iframe模式的话
			if(iframe){
				tabPanel.tabs('add',{
					title:title,
					content:content,
					iconCls:iconCls,
					fit:true,
					cls:'pd3',
					closable:true
				});
			}else{
				//div模式
				tabPanel.tabs('add',{
					title:title,
					href:href,
					iconCls:iconCls,
					fit:true,
					cls:'pd3',
					closable:true
				});
		}
		}else{//存在的话就是创建
				tabPanel.tabs('select',title);
		}
		}
	</script>
</body>
</html>